<html>
<head>
<style type="text/css">
body, html {
    margin: 0;
    width: 100%;
    height: 100%;
}
</style>

<script type="text/javascript" src="./shaderkit.js"></script>
<script type="text/javascript">
function GlslTransition() {
    this.renderer = new ShaderKit.Renderer(document.getElementById("canvas"));
    this.shader = new ShaderKit.Shader(this.renderer, ShaderKit.Shader.loadShader("shader"));
}
GlslTransition.prototype.render = function (time) {
    var shader = this.shader;
    var video = webvfx.getImage('video');
    var scaleWidth = webvfx.getNumberParameter('mlt_profile_scale_width');
    var scaleHeight = webvfx.getNumberParameter('mlt_profile_scale_height');
    shader.updateUniform("progress", time);
    shader.updateUniform("from", video.toImageData());
    shader.updateUniform("resolution", [video.width / scaleWidth, video.height / scaleHeight]);
    shader.updateUniform("maximum", webvfx.getNumberParameter("maximum"));
    resize();
    this.renderer.render(shader);
}
function init() {
    if (window.webvfx)
    try {
        transition = new GlslTransition();
        webvfx.renderRequested.connect(transition, GlslTransition.prototype.render);
        webvfx.imageTypeMap = { "video" : webvfx.SourceImageType };
        webvfx.readyRender(true);
    } catch (e) {
        console.warn(e);
        webvfx.readyRender(false);
    }
}
function resize() {
    var canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}
window.addEventListener("load", init, false);
window.addEventListener("resize", resize, false);
</script>
<script id="shader" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
uniform sampler2D from;
uniform float progress;
uniform float maximum;
uniform vec2 resolution;

/*
  (C) Sergey Kosarevsky, 2014
  Copyright (c) 2019 Meltytech, LLC

  Available under the terms of MIT license
  http://www.linderdaum.com
*/

void main(void)
{
    float Radius = 1.0;
    float T = progress;
    float M = clamp(maximum, 0.0, 1.0) * 8.0;

    vec2 UV = gl_FragCoord.xy / resolution.xy;

    UV -= vec2( 0.5, 0.5 );

    float Dist = length(UV);

    if ( Dist < Radius )
    {
        float Percent = (Radius - Dist) / Radius;
        float A = ( T <= 0.5 ) ? mix( 0.0, 1.0, T/0.5 ) : mix( 1.0, 0.0, (T-0.5)/0.5 );
        float Theta = Percent * Percent * A * M * 3.14159;
        float S = sin( Theta );
        float C = cos( Theta );
        UV = vec2( dot(UV, vec2(C, -S)), dot(UV, vec2(S, C)) );
    }
    UV += vec2( 0.5, 0.5 );

    gl_FragColor = texture2D( from, UV );
}
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
